<template>
  <div class="openDetail">
    <hr style="border: none">


    <div id="myChart" style="float:left;width:100%;height: 300px"></div>
    <!--<template>-->
      <!--<div ref='myEchart' style="width:500px;height:400px"></div>-->

    <!--</template>-->
    <div id="main1" style="float:left;width:100%;height: 666px"></div>
    <div id="main2" style="float:left;width:100%;height: 666px"></div>


  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        dataList1: [],
        dataName: [],
        dataList2: [],
        dataName2: [],
        dataList: {
          buildName: [],
          total: []
        },
        //       dataList:[
        //         {value:1, name:'0-20分'},
        //         {value:3, name:'21-50分'},
        //         {value:24, name:'51-70分'},
        //         {value:7, name:'71-80分'},
        //         {value:3, name:'81-100分'},
        //       ],
        loading: false,
        url: {
          queryPage: '/baoxiu/repaire/getBuildTotal',
          delete: '/baoxiu/buildDetail/delete',
          goodsTotal: '/baoxiu/repaire/getGoodsTotal',
          delTotal: '/baoxiu/repaire/getBuildDetailTotal'
        },
        // tableData: [],
        queryForm: {
          dialogFormVisible: false,
          data: {
            currentPage: 1,
            pageSize: 10,
            buildName: ''
          }
        }
      }
    },
    created () {
      this.init()
      this.init1()
      this.init2()
    },
    methods: {
      init2 () {
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.delTotal))
          .then(({data}) => {
            console.log(data, 'data')
            this.loading = false
            for (let i = 0; i < data.length; i++) {
              this.dataList2.push({name: data[i].buildDetailName, value: data[i].total})
              this.dataName2.push(data[i].buildDetailName)
            }
            console.log(this.dataList1, 'dataList1')
          }).finally(_ => {
            this.initData2()
          })
      },
      initData2 () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '报修地点统计',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: '70%',
            y: 'center',
            data: this.dataName2
          },
          series: [
            {
              name: '地点',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this.dataList2,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      // initChart(){
      //   let myChart = echarts.init(this.$refs.myEchart);
      //   myChart.setOption({
      //     tooltip: {
      //       trigger:'item',
      //       formatter: "{a} <br/>{b}: {c} <br/> ({d}%)"
      //     },
      //     series : [
      //       {
      //         name:'学生作业提交率',
      //         type: 'pie',
      //         radius : '80%',
      //         center: ['52%', '53%'],
      //         avoidLabelOverlap: false,
      //         data: this.dataList,
      //         itemStyle: {
      //           emphasis: {
      //             shadowBlur: 5,
      //             shadowOffsetX: 0,
      //             shadowColor: 'rgba(0, 0, 0, 0.3)'
      //           }
      //         }
      //       }
      //     ]
      //   })
      // },
      init1 () {
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.goodsTotal))
          .then(({data}) => {
            console.log(data, 'data')
            this.loading = false
            for (let i = 0; i < data.length; i++) {
              this.dataList1.push({name: data[i].goodsName, value: data[i].total})
              this.dataName.push(data[i].goodsName)
            }
            console.log(this.dataList1, 'dataList1')
          }).finally(_ => {
            this.initData()
          })
      },
      initData () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '报修物品统计',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: '70%',
            y: 'center',
            data: this.dataName
          },
          series: [
            {
              name: '物品',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this.dataList1,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {text: '报修楼统计',
            x: 'center'
          },
          tooltip: {},
          xAxis: {
            data: this.dataList.buildName
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: this.dataList.total
          }]
        })
      },
      init () {
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.queryPage), {
            params: this.queryForm.data
          })
          .then(({data}) => {
            this.loading = false
            for (let i = 0; i < data.length; i++) {
              this.dataList.buildName.push(data[i].buildName)
              this.dataList.total.push(data[i].total)
            }
            console.log(this.dataList.buildName, 'buildName')
            console.log(this.dataList.total, 'total')
            // console.log(this.tableData, 'tableData')
          }).finally(_ => {
            this.drawLine()
          })
      }
    }
  }
</script>

<style scoped>
</style>
